<template>
  <div class="box">
    <h1>组件间通信2: vue自定义事件</h1>
    <p>count: {{count}}</p>
    <!-- 
      区别原生事件与自定义事件
        原生事件
          绑定: 原生标签上 / 组件标签上加.native (绑定在组件内部的根标签)
          事件对象(event)/$event: 一定是对象, 包含事件相关信息的对象, 如: pageX/pageY/target/keyCode
        自定义事件
          绑定: 组件标签上(没有加.native)
          事件对象(event)/$event: 可以任意类型, 甚至可能是undefined

          事件对象: 本质就是分发事件时指定的数据    事件相关数据对象
     -->

    <h2>原生事件监听</h2>
    <button @click="test1">原生标签原生DOM事件监听</button>
    <button @click="test1($event)">原生标签原生DOM事件监听2</button>
    <Event1 @click.native="test1"/>


    <h2>自定义事件监听</h2>
    <!-- <Event2 @xxx="test2" @click="test2" @increment="handleIncrement"/> -->
    <Event2 ref="child" @xxx="test2" @click="test2($event)"/>

    <br>
    <button @click="$bus.$emit('updateBrother', '++')">测试全局总线</button>
  </div>
</template>

<script type="text/ecmascript-6">
  import Event1 from './Event1.vue'
  import Event2 from './Event2.vue'

  export default {
    name: 'EventTest',

    data () {
      return {
        count: 0
      }
    },

    mounted () {
      // 给子组件绑定自定义事件监听
      this.$refs.child.$on('increment', this.handleIncrement)
    },

    methods: {
      test1 (event) { // 原生的event
        console.log(event)
        alert(event.target.innerHTML)
      },

      test2 (event) { // 自定义的event
        console.log(event)
        alert(event)
      },

      handleIncrement (num) {
        this.count += num
      }
    },

    components: {
      Event1,
      Event2,
    },
  }
</script>
